11. Add an overlay

L4 A10 Add An Overlay

Reference Documentation

One way you can customize the Google Map is by drawing on top of it. This technique is useful if you want to highlight a particular type of location, such as popular fishing spots.

  • Shapes: You can add polylines, polygons, and circles to the map.
  • GroundOverlay objects: A ground overlay is an image that is fixed to a map. Unlike markers, ground overlays are oriented to the Earth's surface rather than to the screen. Rotating, tilting, or zooming the map changes the orientation of the image. Ground overlays are useful when you wish to fix a single image at one area on the map

In this step, you add a ground overlay in the shape of an Android to your home location.

  1. Download this Android image and save it in your res/drawable folder. (Make sure the file name is android.png.)

  1. In onMapReady(), after the call to move the camera to your home’s position, create a GroundOverlayOptions object. Assign the object to a variable called homeOverlay:
val androidOverlay = GroundOverlayOptions()
  1. Use the BitmapDescriptorFactory.fromResource()method to create a BitmapDescriptor object from the above image. Pass the object into the image() method of the GroundOverlayOptions object:
val androidOverlay = GroundOverlayOptions()
   .image(BitmapDescriptorFactory.fromResource(R.drawable.android))
  1. Set the position property for the GroundOverlayOptions object by calling the position() method. Create a float for the width in meters of the desired overlay. For this example, a width of 100f works well. Pass in the home LatLng object and the size value.
val overlaySize = 100f
val androidOverlay = GroundOverlayOptions()
   .image(BitmapDescriptorFactory.fromResource(R.drawable.android))
   .position(homeLatLng, overlaySize)
  1. Call addGroundOverlay() on the GoogleMap object. Pass in your GroundOverlayOptions object:
map.addGroundOverlay(androidOverlay)
  1. Run the app. Try changing the value of zoomLevel to 18f to see the Android image as an overlay.